/*
   homepage.css
   
   Created by lenovo on 2018-03-20.
   Copyright 2018 lenovo. All rights reserved.
*/

/*banner轮播 start*/

#lunbobox {
    height:580px;
    position:relative;
}
.lunbo {
    height:580px;
    position: relative;
}
.lunbo img {
    width:100%;
    height:580px;
    position:absolute;
    top:0px;
    left:0px;
}

/*banner轮播 end*/

div.introduce{
	width: 100%;
	height: 570px;
	position: relative;
	overflow: hidden;
	background-color: #fbfbfb;
}

div.introduce-bg{
	position: absolute;
	width: 100%;
	height: 570px;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 88;
	background-image: url(../img/introduce-bg.png);
	overflow: hidden;
}

div.move{
	animation: move 20s linear infinite;
	-moz-animation: move 20s linear infinite; /* Firefox */
	-webkit-animation: move 20s linear infinite; /* Safari and Chrome */
	-o-animation: move 20s linear infinite; /* Opera */
	/* animation-fill-mode: forwards; */
	animation-iteration-count: infinite;
	top: 40px;
	left: 130px;
}
@keyframes move{0%{left:0%;} 25%{left:-10%;top: 10%;}  50%{left:0%;top: 0%;} 75%{left:-10%;top: -10%;} 100%{left:0%;top: 0%;}}
@-moz-keyframes move{0%{left:0%;} 25%{left:-10%;top: 10%;}  50%{left:0%;top: 0%;} 75%{left:-10%;top: -10%;} 100%{left:0%;top: 0%;}}
@-webkit-keyframes move{0%{left:0%;} 25%{left:-10%;top: 10%;}  50%{left:0%;top: 0%;} 75%{left:-10%;top: -10%;} 100%{left:0%;top: 0%;}}
@-o-keyframes move{0%{left:0%;} 25%{left:-10%;top: 10%;}  50%{left:0%;top: 0%;} 75%{left:-10%;top: -10%;} 100%{left:0%;top: 0%;}}



.introduce-Icon{
	position: absolute;
	top: 70px;
	left: 50%;
	width: 230px;
	height: 52px;
	margin-left: -115px;
}

div.introduce-left{
	display: inline-block;
	width: 533px;
	height: 300px;
	margin-top: 192px;
	margin-right: 40px;
	vertical-align: top;
}

div.introduce-right{
	display: inline-block;
	width: 575px;
	font-family: PingFang-SC-Regular;
	font-size:16px;
	line-height: 28px;
	color: #333333;
	margin-top: 192px;
	text-indent: 32px;
}

div.server{
	width: 100%;
	height: 667px;
	background-image: url(../img/server-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	text-align: center;
}

.server-Icon{
	position: absolute;
	width: 230px;
	height: 52px;
	margin-left: -115px;
	top: 38px;
	left: 50%;
}
div.serverBox{
	display: inline-block;
	width: 233px;
	height: 360px;
	margin-top: 200px;
	margin-right: 210px;
	text-align: right;
	cursor: pointer;
}
div.serverItem{
	margin: 44px auto 0px auto;
	width: 233px;
	height: 28px;
	background-image: url(../img/serverItem.png);
	background-size: 130px 17px;
	background-position: left center;
	background-repeat: no-repeat;
	transition: all 2s;
	-moz-transition:all 2s;	/* Firefox 4 */
	-webkit-transition:all 2s;	/* Safari 和 Chrome */
	-o-transition: all 2s;
}
div.serverBox:hover div.serverItem{
	width: 130px;
}
div.serverBox:hover div.serverItem p{
	text-align: center;
}
div.serverItem p{
	margin: 0px;
	width: 80px;
	height: 28px;
	font-family: PingFang-SC-Regular;
	font-size: 24px;
	display: inline-block;
	line-height: 20px;
	color: #666666;
	transition: all 2s;
	-moz-transition:all 2s;	/* Firefox 4 */
	-webkit-transition:all 2s;	/* Safari 和 Chrome */
	-o-transition: all 2s;
}



div.menu{
	width: 100%;
	height: 530px;
	padding-top: 148px;
	background-image: url(../img/menu-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	text-align: center;
}
.menu-Icon{
	position: absolute;
	width: 230px;
	height: 52px;
	margin-left: -115px;
	top: 26px;
	left: 50%;
}
div.menuBox{
	display: inline-block;
	width: 280px;
	height: 380px;
	vertical-align: top;
	margin-right: 20px;
	cursor: pointer;
	position: relative;
	transition: all .8s;
	-moz-transition: all .8s;	/* Firefox 4 */
	-webkit-transition: all .8s;	/* Safari 和 Chrome */
	-o-transition: all .8s;
}
div.menuBox:hover{
	margin-top: -10px;
}
div.menuBox:hover div.menuItem {
	display: block;
}
div.menuItem {
	display: none;
	position: absolute;
	width: 280px;
	height: 380px;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(211, 189, 139, 0.5);
}

div.menuBox img{
	width: 280px;
	height: 380px;
}

div.quality{
	background-image: url(../img/quality-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 778px;
	margin-bottom: 0px;
	position: relative;
}

.quality-Icon{
	position: absolute;
	width: 230px;
	height: 52px;
	margin-left: -115px;
	top: 26px;
	left: 50%;
}

div.LookMore{
	background-image: url(../img/LookMore-bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 445px;
	position: relative;
}

.LookMore-Icon{
	position: absolute;
	width: 230px;
	height: 52px;
	margin-left: -115px;
	top: 0px;
	left: 50%;
}
.LookMore-left{
	display: inline-block;
	width: 429px;
	height: 281px;
	margin-top: 106px;
	margin-right: 110px;
	vertical-align: top;
}
.LookMore-right{
	display: inline-block;
	width: 554px;
	font-family: PingFang-SC-Regular;
	font-size: 14px;
	line-height: 28px;
	color: #333333;
	margin-top: 147px;
}
